<template>
    <Grid class="grid-container" ref="gridRef" :collapsed="collapsed" :gap="gap" :cols="searchCol">
        <GridItem v-for="item in 7" :key="item" :class="'item' + ' ' + 'item-' + item">
            <div class="grid-item">{{ item }}</div>
        </GridItem>
        <GridItem suffix :class="'item' + ' ' + 'item-' + -1">
            <div class="grid-item">suffix</div>
        </GridItem>
    </Grid>
</template>

<script setup lang="ts" name="Grid">
import { ref } from 'vue'
import Grid from '@/components/Grid/index.vue'
import GridItem from '@/components/Grid/components/GridItem.vue'
let collapsed = ref(true)//是否展开
let gap = ref<[number,number]>([10, 10])// gap:[0,20]//间距，是个数组，代表xx与y轴的间隔 
let searchCol = ref({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 })//表格搜索项每列占比配置,就是一列占多宽
</script> 
<style lang="scss" scoped>
.grid-container {
    height: 100%;

    .item {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 25px;
        color: #fff;
        cursor: pointer;
        border: 1px solid #e5e4e9;
    }
}

.item--1 {
    background-color: tomato;
}

.item-1 {
    background-color: #87bba2;
}

.item-2 {
    background-color: #ff9b54;
}

.item-3 {
    background-color: #73628a;
}

.item-4 {
    background-color: #76c893;
}

.item-5 {
    background-color: #619b8a;
}

.item-6 {
    background-color: #55828b;
}

.item-7 {
    background-color: #427aa1;
}

.item-8 {
    background-color: #38a3a5;
}

.item-9 {
    background-color: #fcca46;
}</style>

